<template>
    <div>
        <div id="big">
   <!-- 面包屑 -->
   <div class="mbx_big">
       <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>全部商品</el-breadcrumb-item>
  <el-breadcrumb-item>{{mbx_item}}</el-breadcrumb-item>
</el-breadcrumb>
   </div>
        <!-- 面包屑 -->


<router-link to=""></router-link>
        <!-- 标签栏 -->
        <ul>
            <div>分类</div>
            <li @click="fl_all" :style="class_all"> <router-link to="/flall" :style="class_all"> 全部</router-link></li>
            <li @click="fl_sj" :style="a"><router-link to="/fl/?id=1" :style="a">手机</router-link></li>
            <li @click="fl_dsj" :style="b"><router-link to="/fl/?id=2" :style="b">电视机</router-link></li>
            <li @click="fl_kt" :style="c"><router-link to="/fl/?id=3" :style="c">空调</router-link></li>
            <li @click="fl_xyj" :style="d"><router-link to="/fl/?id=4" :style="d">洗衣机</router-link></li>
            <li @click="fl_bht" :style="e"><router-link to="/fl/?id=5" :style="e">保护套</router-link></li>
            <li @click="fl_bhm" :style="f"><router-link to="/fl/?id=6" :style="f">保护膜</router-link></li>
            <li @click="fl_cdq" :style="g"><router-link to="/fl/?id=7" :style="g">充电器</router-link></li>
            <li @click="fl_cdb" :style="h"><router-link to="/fl/?id=8" :style="h">充电宝</router-link></li>
            <div style="border-bottom:1px solid gray;width:19%;"></div>
        </ul>
        <!-- 标签栏 -->

        <!-- 三级路由 -->
        <div class="bottom_ly">
       <router-view></router-view>
        </div>
        <!-- 三级路由 -->





        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            mbx_item:"分类",
            a:"",
            b:"",
            c:"",
            d:"",
            e:"",
            f:"",
            g:"",
            h:"",
            class_all:"",
            id:1
        };
    },

    mounted() {
        this.fl_all();
    },

    methods: {
        fl_all(){
            this.a=""
            this.b=""
            this.c=""
            this.d=""
            this.e=""
            this.f=""
            this.g=""
            this.h=""
            this.class_all="color:#0af;border-bottom:none;"
        },
       async fl(){
                 let {data}=await this.$axios.post("api/product/getProductByCategory",{categoryID: [this.id], currentPage:1, pageSize: 15})
                 let arr =data.Product
               this.$store.commit('fladd',arr)
        },
        fl_sj(){
            this.a="color:#0af;border-bottom:none;"
            this.b=""
            this.c=""
            this.d=""
            this.e=""
            this.f=""
            this.g=""
            this.h=""
            this.class_all=""
            this.id=1;
            this.fl();
        },
         fl_dsj(){
            this.a=""
            this.b="color:#0af;border-bottom:none;"
            this.c=""
            this.d=""
            this.e=""
            this.f=""
            this.g=""
            this.h=""
            this.class_all=""
             this.id=2;
             this.fl();
        },
         fl_kt(){
            this.a=""
            this.b=""
            this.c="color:#0af;border-bottom:none;"
            this.d=""
            this.e=""
            this.f=""
            this.g=""
            this.h=""
            this.class_all=""
             this.id=3;
             this.fl();
        },
         fl_xyj(){
            this.a=""
            this.b=""
            this.c=""
            this.d="color:#0af;border-bottom:none;"
            this.e=""
            this.f=""
            this.g=""
            this.h=""
            this.class_all=""
             this.id=4;
             this.fl();
        },
         fl_bht(){
            this.a=""
            this.b=""
            this.c=""
            this.d=""
            this.e="color:#0af;border-bottom:none;"
            this.f=""
            this.g=""
            this.h=""
            this.class_all=""
             this.id=5;
             this.fl();
        },
         fl_bhm(){
            this.a=""
            this.b=""
            this.c=""
            this.d=""
            this.e=""
            this.f="color:#0af;border-bottom:none;"
            this.g=""
            this.h=""
            this.class_all=""
             this.id=6;
             this.fl();
        },
         fl_cdq(){
            this.a=""
            this.b=""
            this.c=""
            this.d=""
            this.e=""
            this.f=""
            this.g="color:#0af;border-bottom:none;"
            this.h=""
            this.class_all=""
             this.id=7;
             this.fl();
        },
         fl_cdb(){
            this.a=""
            this.b=""
            this.c=""
            this.d=""
            this.e=""
            this.f=""
            this.g=""
            this.h="color:#0af;border-bottom:none;"
            this.class_all=""
             this.id=8;
             this.fl();
        }
    },
};
</script>

<style scoped>
#big{
    width: 100%;
    height: 1500px;
}
.mbx_big{
    width: 100%;
    height: 50px;
    background-color: #ddd;
    box-sizing: border-box;
    padding-top: 15px;
    padding-left: 50px;
}
ul{
    width: 100%;
    height: 35px;
    display: flex;
    margin-top: 20px;
}
li{
    width: 8%;
    text-align: center;
    line-height: 35px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: white;
    cursor: pointer;
}
ul>div:nth-child(1){
    width: 8%;
    text-align: center;
    line-height: 35px;
    border-bottom: 1px solid gray;
    background-color: #eee;
    font-weight: bolder;
}
li:nth-child(10){
    border-right: 1px solid gray;
}
li:hover,li>a:hover{
    color: #0af;
}
.bottom_ly{
    width: 100%;
    height: 85%;
    margin-top: 2%;
    background-color: rgba(222, 222, 222,.5);
}
</style>